<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red
        }
        .box::after{
            content: "";
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">123</div>
    <script>
        // 获取非行间样式 ；
        // 1.获取和设置行间样式 元素.style.样式名称
        // style 针对行间样式的获取或者设置
        // 获取行间样式 
        // var boxEle = document.querySelector(".box");
        // document.onclick = function(){
        //     // var b =  boxEle.style.background;  // boxEle.style['background']
        //     var b = boxEle.style['background'];
        //     console.log(b);
        // }
        // var obj  ={
        //     name:"hello",
        //     age:20
        // }

        // 设置行间样式
        // document.onclick = function(){
        //     boxEle.style.color = "white";
        // }




        // 获取age值 
        // console.log( obj.age);
        // console.log( obj['age']);

        // var myage = "age";
        // // .语法 不支持 解析变量
        // console.log(obj.myage); //  obj.myage---> obj['myage']
        // console.log(obj[myage]); // myage变量 ---解析 --->obj['age']


        // 2.获取非行间样式 :getComputedStyle
        // 预定义函数 
        // getComputedStyle(获取哪个元素,伪类样式)['样式名称'];
        var boxEle = document.querySelector(".box");
        boxEle.onclick = function(){
           var w =  getComputedStyle(boxEle,null)['width'];
           console.log(w);
           this.style.background = "blue";
        }

    </script>
</body>

</html>